<template>
  <div style="text-align:left;line-height:25px;background-color:white;margin:0px;padding:0px;">
      <div style="width:98%;margin-left:10px;height:40px;border:1px solid white;background-color:#d0d0d3;border-left:8px solid #23b7e5;">
              <p style="margin-top:5px;margin-left:10px;font-size:20px;">欢迎使用小区物业管理系统！&nbsp;&nbsp;&nbsp;登录次数：520</p>
      </div>
      <div style="width:100%;height:120px;margin-top:20px;">
         <div class="div1">
          <i class="el-icon-office-building" style="font-size:35px;"></i>&nbsp;
          <i style="font-size:16px;">总栋数</i>&nbsp;
          <i style="font-size:28px;">{{buildnum}}栋</i>
        </div>
        <div class="div2">
          <i class="el-icon-school" style="font-size:35px;">
          </i>&nbsp;
          <i style="font-size:16px;">总户数</i>&nbsp;
          <i style="font-size:28px;">{{housenum}}户</i>
        </div>
        <div class="div3">
          <i class="el-icon-user" style="font-size:35px;">
          </i>&nbsp;
          <i style="font-size:16px;">总人数</i>&nbsp;
          <i style="font-size:28px;">{{personnum}}人</i>
        </div>
        <div class="div4">
          <i class="el-icon-s-home" style="font-size:35px;">      
          </i>&nbsp;
          <i style="font-size:16px;">租户数量</i>&nbsp;
          <i style="font-size:28px;">{{rentnum}}户</i>
        </div>
      </div>
      <h2 style="color:gray;margin-left:10px;">信息统计</h2>
      <hr style="color:gray;">
      <div style="width:100%;height:380px;margin-top:20px;margin-left:0px">
        <!-- 图一 -->
        <div class="tuKuan">
          <div style="width:100%;height:40px;;margin-left:20px;border-left:8px solid #23b7e5;">
          <span style="margin-left:10px;" >小区人数</span>
          </div>
          <div style="width:100%;height:300px;">
             <echarts></echarts>
          </div>
        </div>
         <!-- 图二 -->
        <div class="tuKuan">
          <div style="width:100%;height:40px;border-left:8px solid #23b7e5;">
         <span style="margin-left:10px;">投诉/满意度</span>
          </div>
          <div style="width:100%;height:290px;">
             <echarts2></echarts2>
          </div>
        </div>
         <!-- 图三 -->
        <div class="tuKuan">
          <div style="width:100%;height:40px;border-left:8px solid #23b7e5;">
            <span style="margin-left:10px;">小区停车位</span>
          </div>
          <div style="width:100%;height:290px;">
             <echarts3></echarts3>
          </div>
        
        </div>
        <!-- 活动部分 -->
        <div style="width:100%;height:600px;float:left;clear:both;background-color:white;">
            <!-- 最新活动 -->
            <hr style="margin-top:30px;color:gray;"/>
           <div class="tuKuan2">
              <div style="width:100%;height:40px;border-left:8px solid #23b7e5;">
              <span style="margin-left:10px;" >最新活动</span>
              </div>
              <div style="width:100%;height:500px;">
                <div style="width:94%;height:500px;margin:10px auto;border:1px solid gray;border-radius:3px;">
                  <el-table
                :data="tableData1"
                style="width: 100%"
                :show-header="false">
                <el-table-column
                  label="编号"
                  width="30">
                  <template slot-scope="scope">
                    <div style="width:20px;height:20px;background-color:#f05050;color:white;text-align:center;" >{{scope.row.id}}</div>
                  </template>
                 
                </el-table-column>
                <el-table-column
                  prop="activity"
                  label="活动名称"
                  width="265">
                </el-table-column>
                <el-table-column
                  prop="time"
                  label="时间"
                  width="80">
                </el-table-column>
              </el-table>
                </div>
              </div>
           </div>

           <div class="tuKuan2">
              <div style="width:100%;height:40px;border-left:8px solid #23b7e5;">
              <span style="margin-left:10px;" >最新保修</span>
              </div>
              <div style="width:100%;height:500px;">
                <div style="width:94%;height:500px;margin:10px auto;border:1px solid gray;border-radius:3px;">
                  <el-table
                :data="tableData2"
                style="width: 100%"
                :show-header="false">
                <el-table-column
                  prop="id"
                  label="编号"
                  width="30">
                  <template slot-scope="scope">
                    <div style="width:20px;height:20px;background-color:#23b7e5;color:white;text-align:center;"  >{{scope.row.id}}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="thing"
                  label="事件"
                  width="220">
                </el-table-column>
                <el-table-column
                  prop="time"
                  label="时间"
                  width="60">
                </el-table-column>
                <el-table-column
                  prop="state"
                  label="状态"
                  width="65"
                  >
                </el-table-column>
              </el-table>
                </div>
              </div>
           </div>

           <div class="tuKuan2">
              <div style="width:100%;height:40px;border-left:8px solid #23b7e5;">
              <span style="margin-left:10px;" >系统信息</span>
              </div>
              <div style="width:100%;height:500px;">
                <div style="width:94%;height:500px;margin:10px auto;border-radius:3px;">
                 <table border="1" cellspacing="0" width="378" height="500" bordercolor="#e6e6e9" >
                   <tr>
                     <th colspan="2" style="background-color:#e6e6e9;height:50px;">服务器信息</th>
                   </tr>
                   <tr>
                     <td style="width:150px;">服务器计算机名</td>
                     <td>DELL</td>
                   </tr>
                   <tr>
                     <td >服务器IP地址</td>
                     <td>127.0.0.1</td>
                   </tr>
                   <tr>
                     <td >服务器域名</td>
                     <td>www.xxx.net</td>
                   </tr>
                   <tr>
                     <td >服务器端口</td>
                     <td>8080</td>
                   </tr>
                   <tr>
                     <td >服务器IIS版本</td>
                     <td>Microsoft-IIS/6.0</td>
                   </tr>
                   <tr>
                     <td >本文件所在文件夹</td>
                     <td>D:\WebSite\</td>
                   </tr>
                   <tr>
                     <td >服务器操作系统</td>
                     <td>Microsoft Windows 10</td>
                   </tr>
                   <tr>
                     <td >系统所在文件夹</td>
                     <td>C:\WINDOWS\system32</td>
                   </tr>
                   <tr>
                     <td >服务器脚本超时时间</td>
                     <td>30000秒</td>
                   </tr>
                   <tr>
                     <td >服务器的语言种类</td>
                     <td>Chinese (People's Republic of China)</td>
                   </tr>
                 </table>
                </div>
              </div>
           </div>
        </div>
      </div>

  </div>
</template>

<script>
import echarts from "@/views/echarts1";
import echarts2 from "@/views/echarts2";
import echarts3 from "@/views/echarts3";
export default {
   components:{
      echarts,
      echarts2,
      echarts3
   },
   data(){
    return{
      tableData1:[
        {
          id:'1',
          activity:'小区活动1',
          time:'09:00'
        },
        {
          id:'2',
          activity:'小区活动2',
          time:'10:00'
        },
        {
          id:'3',
          activity:'小区活动3',
          time:'11:00'
        },
        {
          id:'4',
          activity:'小区活动4',
          time:'12:00'
        },
        {
          id:'5',
          activity:'小区活动5',
          time:'14:00'
        },
      ],
      tableData2:[
        {
          id:'1',
          thing:'更换楼道灯泡',
          time:'09:00',
          state:'已受理'
        },
        {
          id:'2',
          thing:'更换垃圾桶',
          time:'10:00',
          state:'已受理'
        },
        {
          id:'3',
          thing:'更换大门门锁',
          time:'11:00',
          state:'未受理'
        },
      ],
      tableData3:[],
      buildnum:'', //总栋数
      housenum:'',//总户数
      personnum:'',// 总人数
      rentnum:''//租户数量
    }
   },
   created(){
     this.getNumbers();
   },
   methods:{
    getNumbers(){
      this.$axios.get('getNunber')
      .then(res=>{
        if(res.data.statusCode==200){
          this.buildnum=res.data.data.buildnum;
          this.housenum=res.data.data.housenum;
          this.personnum=res.data.data.personnum;
          this.rentnum=res.data.data.rentnum;
          
        }
      })
      .catch()
    },
   }

   
}
</script>
<style scoped>
.tuKuan{
  width:32%;
  height: 370px;
  background-color: white;
  /* border: 1px solid red; */
  float: left;
  margin-left:10px;
}
.tuKuan2{
  width:32%;
  height: 570px;
  background-color: white;
  /* border: 1px solid red; */
  float: left;
  margin-left:10px;
}
.div1 {
  width: 20%;
  height: 90px;
  margin-left: 50px;
  margin-top: 15px;
  margin-bottom: 10px;
  background-color: #409eff;
  border-radius: 5px;
  float: left;
  color: white;
  text-align: center;
  line-height: 90px;
}
.div2 {
  width: 20%;
  height: 90px;
  margin-left: 50px;
  margin-top: 15px;
  margin-bottom: 10px;
  background-color: #f56c6c;
  border-radius: 5px;
  float: left;
  color: white;
  text-align: center;
  line-height: 90px;
}
.div3 {
  width: 20%;
  height: 90px;
  margin-left: 50px;
  margin-top: 15px;
  margin-bottom: 15px;
  background-color: #409eff;
  border-radius: 5px;
  float: left;
  color: white;
  text-align: center;
  line-height: 90px;
}
.div4 {
  width: 20%;
  height: 90px;
  margin-left: 50px;
  margin-top: 15px;
  margin-bottom: 15px;
  background-color: #e6a23c;
  border-radius: 5px;
  float: left;
  color: white;
  text-align: center;
  line-height: 90px;
}
</style>